﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="theme.css" rel="stylesheet" />
    <style type="text/css">
        img { width:100%;opacity:0;
              transition: opacity 2s;
               -webkit-transition: opacity 2s;
               -moz-transition: opacity 2s;
               -ms-transition: opacity 2s;
        }
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


    <!--  pace.js  -->
    <!--<script type="text/javascript">
        window.paceOptions = {
            
        }
    </script>
    <script src="pace.min.js"></script>
    <script type="text/javascript">
        Pace.on('hide', function () {
            $('img').css({ 'opacity': 1 });
        });
    </script>-->
    <!--  pace.js  -->


    <style type="text/css">
        .progress-bar {
            position: fixed;
            z-index: 999999;
            top: 50%;
            left: 0;
            width: 0%;
            height: 2px;
            background: #01439c;
            border-radius: 10%;
            -moz-transition: width 500ms ease-out,opacity 400ms linear;
            -ms-transition: width 500ms ease-out,opacity 400ms linear;
            -o-transition: width 500ms ease-out,opacity 400ms linear;
            -webkit-transition: width 500ms ease-out,opacity 400ms linear;
            transition: width 500ms ease-out,opacity 400ms linear;
        }
        .progress-bar:before { position: absolute; content: ''; top: 0; opacity: 1; width: 10%; right: 0px; height: 2px; box-shadow: #ccc 1px 0 6px 2px; border-radius: 50%; }
    </style>
    <script type="text/javascript">
        $(function () {
            var loaded = 0;
            var number_of_media = $("body img").length;

            doProgress();

            // function for the progress bar
            function doProgress() {
                $("img").load(function () {
                    loaded++;
                    var newWidthPercentage = (loaded / number_of_media) * 100;
                    animateLoader(newWidthPercentage + '%');
                })
            }

            //Animate the loader
            function animateLoader(newWidth) {
                $(".progress-bar").width(newWidth);
                if (loaded == number_of_media) {
                    setTimeout(function () {
                        $(".progress-bar").animate({ opacity: 0 });
                        $('img').css({ 'opacity': 1 });
                    }, 500);
                }
            }
        });
    </script>
</head>
<body>
    <div class="progress-bar"></div>     <img src="images/6597269877772534866.jpg" />
    <img src="images/IMG_3979.jpg" />
    <img src="images/IMG_7153_2.JPG" />
    <img src="images/roadwornseries_04v1_1600x1200.jpg" />
    <img src="images/天津之眼.JPG" />
</body>
</html>
